<template>
  <div>
    <ul>
        <li v-for="item in list" :key="item.time">
            id:{{item.id}} ---书名：{{item.name}} ---时间：{{item.time}}---
            <button @click="del(item.id)">删除</button>---
            <button @click="edit(item.id)">编辑</button>---
        </li>
    </ul>
    <Dialog 
    :info="info"
    @sendFalse="sendFalse"
    @sendEditInfo="sendEditInfo"
    v-show="isShowEdit"></Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'
export default {
    data(){
       return{
        list:[],
        isShowEdit:false,
        info:{}
       } 
    },
  components: { 
    Dialog 
    },
    mounted() {
        this.$bus.$on("sendObj",(obj)=>{
            this.list.push(obj)
        })
    },
    methods:{
        del(id){
            this.list = this.list.filter(item => item.id !==id)
        },
        /* 编辑 */
        edit(id){
            // g过滤出要传递的数据
            this.info = this.list.filter(item => item.id===id)[0]
            this.isShowEdit = true
        },
        /* Dialog 修改isShowEdit */
        sendFalse(flag){
            this.isShowEdit = flag
        },
        // 修改列表
        sendEditInfo(editInfo){
            // 通过map进行替换
            this.list = this.list.map(item =>{
                // 要编辑的内容
                if(item.id === editInfo.id){
                    return editInfo
                } else {
                    // 不需要编辑的内容
                    return item
                }
            })
        }
    }

}
</script>

<style>

</style>